<template>
  <div>
    <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
    <r-search :searchHandle="searchHandleAdd" />
    <r-table :isSelection="false" :isIndex="false" indexLabel="ID" :isPagination="true"
      :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="getData()">
    </r-table>
    <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData"
      :formCols="formCols" ref="elForm" labelWidth="100px" dialogWidth="600px" :isHandle="true" />

    <usage_record :res="usage_record_data" v-if="usage_record_data.show"
      v-on:usage_record_call="usage_record_call"></usage_record>

    <uploadFile type="ic" :res="{ type: 1 }" v-if="uploadFile_fag"
      v-on:uploadFile_call="uploadFile_call"></uploadFile>

    <el-dialog title="充值提示" :visible.sync="centerDialogVisible">
      <ul class="ul_list">
        <li v-for="(item) in settingTopup_list" :key="item.id">
          <div class="dialog_content_item">
            套餐:
            <span>{{ item.mealName }}</span>
          </div>
          <div class="dialog_content_item">
            充值金额:
            <span>{{ item.inMoney }}元</span>
          </div>
          <div class="dialog_content_item" v-show="item.outMoney">
            赠送金额:
            <span>{{ item.outMoney }}元</span>
          </div>
          <div class="btnDiv">
            <el-button class="el-button" type="primary" @click.native="recharge(item)">充值
            </el-button>
          </div>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import usage_record from "./cus/usage_record";
import uploadFile from "../cus/uploadFile";
import axios from 'axios'
import qs from 'qs'
export default {
  data() {
    return {
      radio: '',
      userId: "",

      settingTopup_list: [],
      centerDialogVisible: false,
      uploadFile_fag: false,
      usage_record_data: {
        show: false,
        cardNumber: ''
      },
      searchData: {
        cardNumber: '',
        userPhone: '',
        status: '',
      },
      searchForm: [
        {
          type: 'input',
          prop: 'cardNumber',
          placeholder: 'IC卡编号',
          width: 150
        },
        {
          type: 'input',
          prop: 'userPhone',
          placeholder: '手机号码',
          width: 150
        },
        {
          type: 'select',
          prop: 'status',
          placeholder: '状态',
          width: 150,
          options: [
            {
              label: '正常',
              value: '1'
            },
            {
              label: '禁用',
              value: '2'
            },

          ]
        }
      ],
      searchHandleAdd: [
        {
          label: "添加",
          type: "success",
          icon: 'el-icon-circle-plus-outline',
          handle: e => this.elFormVisible(),
        },
        {
          label: "导入数据",
          type: "success",
          handle: e => {
            this.uploadFile_fag = true;
          }
        },
        // {
        //   label: "导出数据",
        //   icon: 'el-icon-download',
        //   type: "success",
        //   loading: false,
        //   handle: (that) => this.handleDownload(),
        // },
        {
          label: "导入模板下载",
          type: "success",
          handle: async (e) => {
            // const res = await this.apis.importTemplate2();
            // console.log("res---", res);

            // location.href = process.env.VUE_APP_URL + res.msg;
          }
        },
      ],
      searchHandle: [
        {
          label: '搜索',
          type: 'success',
          icon: 'el-icon-search',
          handle: e => this.getData()
        },
        // {
        //     label: '重置',
        //     icon: 'el-icon-refresh-right',
        //     handle: e => this.searchFromReset()
        // },

      ],
      tableData: [],
      tableCols: [
        {
          label: '序号',
          prop: 'id',
        },
        {
          label: 'IC卡编号',
          prop: 'cardNumber',
        },
        {
          label: '是否绑定用户',
          prop: 'unbind',
        },
        {
          label: '绑定人信息',
          prop: 'userName',
        },
        {
          label: '用户手机号',
          prop: 'phone',
        },
        {
          label: 'IC卡绑定手机号',
          prop: 'userPhone',
        },
        {
          label: '绑定时间',
          prop: 'updatedTime'
        },
        {
          label: '创建时间',
          prop: 'createdTime',
          width: 160,
          formatter: e => e.createdTime && this.getDeta(+new Date(e.createdTime.replace(/T/g, ' ')))
        },
        {
          label: '状态',
          prop: 'state',
          formatter: e => e.state == 0 ? '未激活' : e.state == 1 ? '已激活' : e.state == 2 ? '已挂失' : e.state == 3 ? '已注销' : e.state == 4 ? '已补卡' : ''
        },
        {
          label: '操作',
          type: "button",
          width: 350,

          btnList: [
            {
              label: '充值',
              type: 'success',
              handle: async (row) => {
                const res = await this.apis.settingTopup_list({});
                this.settingTopup_list = res.rows
                this.userId = row.userId
                this.centerDialogVisible = true

              }
            },
            {
              label: '删除',
              type: 'danger',
              handle: (row) => this.del(row)
            },

            {
              label: '使用记录',
              type: 'primary',
              handle: (row) => {
                this.usage_record_data.cardNumber = row.cardNumber;
                this.usage_record_data.show = true;
              }
            },
          ]
        }

      ],
      tablePage: { limit: 10, page: 1, total: 0 },

      formData: {
        cardNumber: ''
      },
      formCols: [
        { type: "input", label: "IC卡号", width: 350, prop: "cardNumber" },
      ],
      formRules: {
        cardNumber: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
      },
      formHandle: [
        {
          label: "确认",
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormSubmit(),
        },
        {
          label: "取消",
          icon: "el-icon-circle-close",
          handle: e => this.elFormVisible(),
        },
      ],

    };
  },
  components: {
    usage_record,
    uploadFile
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    async recharge(item) {

      this.$confirm(`确定要${item.mealName}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.apis.updateUserWallet({
          userId: this.userId,
          money: String(item.inMoney),
          mealId: item.id
        })
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.centerDialogVisible = false
        }
      }).catch(() => {

      });


    },
    usage_record_call() {
      this.usage_record_data.show = false;
    },
    async getData() {
      const res = await this.apis.ic_list({
        cardNumber: this.searchData.cardNumber,
        userPhone: this.searchData.userPhone,
        status: this.searchData.status,
        pageNum: this.tablePage.page,
        pageSize: this.tablePage.limit
      });

      const list = res.rows || [];

      this.tableData = list;
      this.tablePage.total = res.total;



    },
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await this.apis.ic_save({
            cardNumber: this.formData.cardNumber
          });

          this.$message({
            message: '操作成功！',
            type: 'success'
          });
          this.elFormVisible();
          this.getData();
        }
      })
    },

    del(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        var res = await this.apis.ic_del({
          id: row.id
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getData();
      }).catch(() => {

      });
    },



    uploadFile_call(fag) {
      this.uploadFile_fag = false;
      if (fag) {
        this.getData();
      }
    }
  },
};
</script>

<style scoped lang="scss">
.dialog_content_item {
  margin-bottom: 5px;
  font-size: 18px;
  display: flex;
  align-content: center;
}
.dialog_content_item > span {
  color: #3e8ef7;
  font-size: 20px;
}
.ul_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ul_list li {
  width: 30%;
  padding: 10px;
  border: #3e8ef7 1px dashed;
  text-align: center;
  margin-bottom: 20px;
}
.ul_list li div:last-child {
  margin-top: 10px;
}
.ul_list li > div {
  width: 100%;
  display: inline-block;
}

.ul_list li > div .el-button {
  margin-top: 10px;
}
</style>

